<template>
  <view class="complaint-detail-page">
    <!-- 投诉基本信息 -->
    <view class="complaint-info-card">
      <u-card title="投诉信息" :border="false">
        <view class="info-item">
          <text class="info-label">投诉标题：</text>
          <text class="info-value">{{ complaintDetail.title }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">投诉类型：</text>
          <u-tag :text="complaintDetail.typeName" type="primary" size="mini"></u-tag>
        </view>
        <view class="info-item">
          <text class="info-label">投诉内容：</text>
          <text class="info-content">{{ complaintDetail.content }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">紧急程度：</text>
          <u-tag :text="complaintDetail.urgencyText" :type="complaintDetail.urgencyType" size="mini"></u-tag>
        </view>
        <view class="info-item">
          <text class="info-label">提交时间：</text>
          <text class="info-value">{{ complaintDetail.createTime }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">处理状态：</text>
          <u-tag :text="complaintDetail.statusText" :type="complaintDetail.statusType" size="mini"></u-tag>
        </view>
      </u-card>
    </view>

    <!-- 处理进度 -->
    <view class="progress-card">
      <u-card title="处理进度" :border="false">
        <view class="progress-timeline">
          <view 
            v-for="(step, index) in progressSteps" 
            :key="index"
            class="progress-step"
            :class="{ active: step.active, completed: step.completed }"
          >
            <view class="step-icon">
              <u-icon 
                :name="step.icon" 
                :color="step.completed ? '#2ed573' : step.active ? '#2d8cf0' : '#ccc'" 
                size="16"
              ></u-icon>
            </view>
            <view class="step-content">
              <text class="step-title">{{ step.title }}</text>
              <text class="step-time">{{ step.time }}</text>
              <text class="step-desc">{{ step.description }}</text>
            </view>
          </view>
        </view>
      </u-card>
    </view>

    <!-- 处理记录 -->
    <view class="record-card">
      <u-card title="处理记录" :border="false">
        <view class="record-list">
          <view 
            v-for="record in processRecords" 
            :key="record.id"
            class="record-item"
          >
            <view class="record-header">
              <text class="record-operator">{{ record.operator }}</text>
              <text class="record-time">{{ record.time }}</text>
            </view>
            <view class="record-content">
              <text class="record-action">{{ record.action }}</text>
              <text class="record-comment">{{ record.comment }}</text>
            </view>
          </view>
        </view>
      </u-card>
    </view>

    <!-- 满意度评价 -->
    <view v-if="complaintDetail.status === 'completed'" class="satisfaction-card">
      <u-card title="满意度评价" :border="false">
        <view class="satisfaction-content">
          <text class="satisfaction-label">请对本次服务进行评价：</text>
          <view class="rating-section">
            <u-rate 
              v-model="satisfactionRating" 
              :count="5"
              :size="24"
              @change="handleRatingChange"
            ></u-rate>
            <text class="rating-text">{{ getRatingText(satisfactionRating) }}</text>
          </view>
          <u-textarea
            v-model="satisfactionComment"
            placeholder="请输入您的评价意见（可选）"
            maxlength="200"
            show-word-limit
            height="80"
          ></u-textarea>
          <u-button 
            type="primary" 
            text="提交评价"
            :loading="submitting"
            @click="submitSatisfaction"
            size="medium"
          ></u-button>
        </view>
      </u-card>
    </view>
  </view>
</template>

<script setup>
/**
 * 投诉详情页面
 * @author Wu.Liang
 * @date 2025-01-27
 */

import { ref, reactive, onMounted } from 'vue'

// 投诉详情数据
const complaintDetail = reactive({
  id: 1,
  title: '小区噪音问题',
  typeName: '噪音扰民',
  content: '每天晚上10点后，楼上住户经常发出噪音，影响休息。希望物业能够协调处理。',
  urgencyText: '紧急',
  urgencyType: 'warning',
  createTime: '2025-01-20 14:30',
  statusText: '处理中',
  statusType: 'warning',
  status: 'processing'
})

// 处理进度步骤
const progressSteps = ref([
  {
    title: '投诉提交',
    time: '2025-01-20 14:30',
    description: '投诉已成功提交',
    icon: 'checkmark-circle',
    completed: true,
    active: false
  },
  {
    title: '受理确认',
    time: '2025-01-20 15:00',
    description: '物业已受理投诉',
    icon: 'checkmark-circle',
    completed: true,
    active: false
  },
  {
    title: '处理中',
    time: '2025-01-21 09:00',
    description: '正在协调处理',
    icon: 'clock',
    completed: false,
    active: true
  },
  {
    title: '处理完成',
    time: '',
    description: '等待处理完成',
    icon: 'checkmark-circle',
    completed: false,
    active: false
  }
])

// 处理记录
const processRecords = ref([
  {
    id: 1,
    operator: '物业客服',
    time: '2025-01-20 15:00',
    action: '受理投诉',
    comment: '已收到您的投诉，我们会尽快处理。'
  },
  {
    id: 2,
    operator: '物业经理',
    time: '2025-01-21 09:00',
    action: '开始处理',
    comment: '已联系相关住户，正在协调解决噪音问题。'
  }
])

// 满意度评价
const satisfactionRating = ref(0)
const satisfactionComment = ref('')
const submitting = ref(false)

// 获取评价文本
const getRatingText = (rating) => {
  const texts = ['', '很不满意', '不满意', '一般', '满意', '很满意']
  return texts[rating] || ''
}

// 处理评分变化
const handleRatingChange = (value) => {
  satisfactionRating.value = value
}

// 提交满意度评价
const submitSatisfaction = async () => {
  if (satisfactionRating.value === 0) {
    uni.showToast({
      title: '请选择评分',
      icon: 'none'
    })
    return
  }
  
  submitting.value = true
  try {
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    uni.showToast({
      title: '评价提交成功',
      icon: 'success'
    })
    
    // 重置表单
    satisfactionRating.value = 0
    satisfactionComment.value = ''
    
  } catch (error) {
    uni.showToast({
      title: '提交失败',
      icon: 'none'
    })
  } finally {
    submitting.value = false
  }
}

// 页面加载时初始化数据
onMounted(() => {
  console.log('投诉详情页面加载完成')
})
</script>

<style lang="scss" scoped>
.complaint-detail-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 16px;
}

.complaint-info-card {
  margin-bottom: 20px;
  
  .info-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 16px;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .info-label {
      width: 80px;
      font-size: 14px;
      color: #666;
      flex-shrink: 0;
    }
    
    .info-value {
      flex: 1;
      font-size: 14px;
      color: #333;
    }
    
    .info-content {
      flex: 1;
      font-size: 14px;
      color: #333;
      line-height: 1.5;
    }
  }
}

.progress-card {
  margin-bottom: 20px;
  
  .progress-timeline {
    .progress-step {
      display: flex;
      align-items: flex-start;
      margin-bottom: 20px;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .step-icon {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: #f0f0f0;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 12px;
        flex-shrink: 0;
      }
      
      .step-content {
        flex: 1;
        
        .step-title {
          display: block;
          font-size: 16px;
          font-weight: 600;
          color: #333;
          margin-bottom: 4px;
        }
        
        .step-time {
          display: block;
          font-size: 12px;
          color: #999;
          margin-bottom: 4px;
        }
        
        .step-desc {
          display: block;
          font-size: 14px;
          color: #666;
        }
      }
      
      &.active {
        .step-icon {
          background: #e6f3ff;
        }
      }
      
      &.completed {
        .step-icon {
          background: #e8f5e8;
        }
      }
    }
  }
}

.record-card {
  margin-bottom: 20px;
  
  .record-list {
    .record-item {
      padding: 16px 0;
      border-bottom: 1px solid #f0f0f0;
      
      &:last-child {
        border-bottom: none;
      }
      
      .record-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
        
        .record-operator {
          font-size: 14px;
          font-weight: 600;
          color: #333;
        }
        
        .record-time {
          font-size: 12px;
          color: #999;
        }
      }
      
      .record-content {
        .record-action {
          display: block;
          font-size: 14px;
          color: #2d8cf0;
          margin-bottom: 4px;
        }
        
        .record-comment {
          display: block;
          font-size: 14px;
          color: #666;
          line-height: 1.5;
        }
      }
    }
  }
}

.satisfaction-card {
  .satisfaction-content {
    .satisfaction-label {
      display: block;
      font-size: 14px;
      color: #333;
      margin-bottom: 16px;
    }
    
    .rating-section {
      display: flex;
      align-items: center;
      margin-bottom: 16px;
      
      .rating-text {
        margin-left: 12px;
        font-size: 14px;
        color: #666;
      }
    }
  }
}
</style> 